<script>
import FormBase from '@/components/FreeForm/design/form/form-base/index.vue'
import Lifecycle from '@/components/FreeForm/design/form/lifecycle/index.vue'
import GroupConfig from '@/components/FreeForm/design/form/group-config/index.vue'
import GeneralField from '@/components/FreeForm/design/field/general-field/index.vue'
import FormGroup from '@/components/FreeForm/design/form/form-group/index.vue'
import Advanced from '@/components/FreeForm/design/field/advanced/index.vue'
import FormRender from '@/components/FreeForm/render/index.vue'
import { getDynamicFormConfig } from '@/api/form'
import { isEmpty } from 'lodash'
import Events from '@/components/FreeForm/design/field/events/index.vue'
import Depend from '@/components/FreeForm/design/field/depend/index.vue'

export default {
  name: 'DesignForm',
  components: {
    Depend,
    Events,
    Advanced,
    GeneralField,
    FormGroup,
    FormRender,
    GroupConfig,
    Lifecycle,
    FormBase
  },
  data() {
    return {
      ctx: {
        formVisibility: true,
        groupVisibility: false,
        isFull: false,
        formConfig: {},
        currentElement: null,
        currentElementType: null,
        activeFormConfig: ['1', '2', '3', '4'],
        activeFieldConfig: ['1', '2', '3', '4']
      }
    }
  },
  created() {
    this.getDynamicFormConfigs()
  },
  methods: {
    openGroup() {
      this.ctx.groupVisibility = true
      this.ctx.elementVisibility = false
    },
    getDynamicFormConfigs() {
      const { query } = this.$route
      let formId = query.id
      if (isEmpty(formId)) {
        formId = this.ctx.formConfig.id
      }
      getDynamicFormConfig({ id: formId }).then(resp => {
        const { data } = resp
        if (!isEmpty(data)) {
          const groups = data.groups || []
          groups.forEach(group => {
            (group.elements || []).forEach(element => {
              try {
                element.attributes = JSON.parse(element.attributes || '{}') || {}
              } catch (e) {
                element.attributes = {}
              }
            })
          })
          this.ctx.formConfig = data
          if (isEmpty(query.id)) {
            this.$router.push(`${this.$route.path}?id=${data.id}`)
          }
        }
      })
    },
    clickElement(element) {
      this.ctx.currentElement = element
      this.ctx.currentElementType = element.type
      this.ctx.elementVisibility = true
    },
    openFullScreen() {
      this.ctx.elementVisibility = false
      this.ctx.formVisibility = false
      this.ctx.isFull = true
    },
    closeFullScreen() {
      this.ctx.elementVisibility = true
      this.ctx.formVisibility = true
      this.ctx.isFull = false
    },
    closeElementSetting() {
      this.ctx.elementVisibility = false
      this.$forceUpdate()
    },
    openElementSetting() {
      this.ctx.elementVisibility = true
      this.ctx.groupVisibility = false
      this.$forceUpdate()
    },
    onSubmitGroup() {
      this.getDynamicFormConfigs()
      this.ctx.groupVisibility = false
      this.$message.success('添加组成功！')
    },
    nonNull(val) {
      return val || {}
    }
  }
}
</script>

<template>
  <el-container class="layout-container">
    <el-container name="el-zoom-in-top">
      <el-aside v-show="ctx.formVisibility" key="formPanel" class="layout-aside">
        <el-scrollbar class="el-scrollbar" style="height: 100%">
          <el-tabs type="card">
            <el-tab-pane label="表单设计">
              <el-collapse v-model="ctx.activeFormConfig" style="padding: 10px">
                <el-collapse-item title="表单基础配置" name="1">
                  <form-base :form-config.sync="ctx.formConfig" />
                </el-collapse-item>
                <el-collapse-item title="表单生命周期" name="2">
                  <lifecycle :form-config.sync="ctx.formConfig" />
                </el-collapse-item>
                <el-collapse-item title="表单组别配置" name="2">
                  <el-button size="small" type="primary" @click="openGroup">添加表单组</el-button>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="表单字段">
              <div style="padding: 0 5px 5px;box-sizing: border-box">
                <form-group
                  :groups="ctx.formConfig.groups"
                  @refresh="getDynamicFormConfigs"
                  @click-element="clickElement"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </el-aside>
      <el-main class="layout-main">
        <el-container>
          <el-header height="41px" style="background: #ffffff;padding: 0">
            <div
              style="height: 100%;width: 100%;text-align: right;line-height: 40px;border-bottom: 1px solid #dcdfe6;"
            >
              <el-button
                v-show="!ctx.isFull"
                type="text"
                @click="openFullScreen"
              >
                全屏
              </el-button>
              <el-button
                v-show="ctx.isFull"
                type="text"
                @click="closeFullScreen"
              >
                关闭全屏
              </el-button>
              <el-button
                v-show="ctx.elementVisibility"
                type="text"
                @click="closeElementSetting"
              >
                关闭字段配置
              </el-button>
              <el-button
                v-show="!ctx.elementVisibility && ctx.currentElement"
                type="text"
                @click="openElementSetting"
              >
                开启字段配置
              </el-button>
              <el-button
                v-show="ctx.formVisibility"
                style="margin-right: 10px"
                type="text"
                @click="ctx.formVisibility = false"
              >
                关闭表单配置
              </el-button>
              <el-button
                v-show="!ctx.formVisibility"
                style="margin-right: 10px"
                type="text"
                @click="ctx.formVisibility = true"
              >
                开启表单配置
              </el-button>
            </div>
          </el-header>
          <el-main class="preview-block" style="padding: 10px!important;">
            <el-scrollbar class="el-scrollbar" style="height: 100%">
              <form-render
                :is-design="true"
                :config="ctx.formConfig"
                @clickElement="clickElement"
              />
            </el-scrollbar>
          </el-main>
        </el-container>
      </el-main>
      <el-aside v-show="ctx.elementVisibility && ctx.currentElement" key="elementPanel" class="layout-aside">
        <el-scrollbar class="el-scrollbar" style="height: 100%">
          <el-tabs type="card">
            <el-tab-pane label="表单设计">
              <el-collapse v-model="ctx.activeFieldConfig" style="padding: 10px">
                <el-collapse-item title="字段基础配置" name="1">
                  <general-field :element="nonNull(ctx.currentElement)" />
                </el-collapse-item>
                <el-collapse-item v-show="ctx.currentElement" title="字段高级配置" name="3">
                  <advanced :element="nonNull(ctx.currentElement)" :attributes="(nonNull(ctx.currentElement)).attributes" />
                </el-collapse-item>
                <el-collapse-item title="组件事件配置" name="2">
                  <events :element="nonNull(ctx.currentElement)" />
                </el-collapse-item>
                <el-collapse-item title="组件依赖" name="4">
                  <depend :element="nonNull(ctx.currentElement)" :attributes="nonNull(ctx.currentElement).attributes" />
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </el-aside>
      <el-aside v-show="ctx.groupVisibility" key="groupPanel" class="layout-aside">
        <el-scrollbar class="el-scrollbar" style="height: 100%">
          <el-collapse style="padding: 10px">
            <el-collapse-item title="表单组配置" name="1">
              <group-config :form-config="ctx.formConfig" :form-id="ctx.formConfig.id" @success="onSubmitGroup" />
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-aside>
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.layout-container {
  height: 100vh;
  overflow: hidden;
  width: 100%;

  ::v-deep .el-collapse-item__header {
    font-weight: bolder;
  }

  ::v-deep .el-form-item__label {
    font-size: 12px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .layout-aside {
    height: calc(100vh);
    background: white;
    padding: 0;
  }

  .container-scroll-bar {
    ::v-deep .el-scrollbar__wrap, ::v-deep .el-scrollbar__view {
      overflow-x: hidden;
    }
  }

  .layout-main {
    padding: 0;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;

    .preview-block {
      height: calc(100vh - 41px);
      background: WhiteSmoke;
    }
  }

  ::v-deep .el-tabs__header {
    margin-bottom: 5px !important;
  }
}
</style>
